{%- if cart != empty -%}
  {%- for item in cart.items -%}
    <div class="as-product-{{ item.id }}">
      <div class="d-flex mb-4">
        {%- assign thumbnail_width = '4rem' -%}
        {%- if item.image -%}
          <div class="position-relative" style="width: {{ thumbnail_width }};">
            <img width="64" height="{{ 64 | divided_by: item.image.aspect_ratio | ceil }}"
              loading="lazy"
              src="{{ item.image | img_url: '64x' }}" 
              srcset="{{ item.image | img_url: '64x' }} 1x, {{ item.image | img_url: '160x' }} 2x, {{ item.image | img_url: '240x' }} 3x"
              alt="{{ item.image.alt | escape }}" 
              class="img-fluid bg-jasmine">
            {% comment %}Image{% endcomment %}
            <a {% if item.url contains 'https://' %}
              target="_blank" rel="nofollow"
            {% endif %} class="stretched-link" href="{{ item.url | within: collections.all }}"></a>
          </div>
        {%- endif -%}
        <div class="ps-3">
          <div class="d-flex justify-content-between">
            <a {% if item.url contains 'https://' %}
              target="_blank" rel="nofollow"
            {% endif %} class="text-body text-decoration-none" style="max-width: 15rem;" href="{{ item.url }}"><span class="fw-bold">{{ item.product.title | escape }}</span>{% unless item.variant.title contains 'Default' %}<br><span class="small">{{ item.variant.title | escape }}</span>{% endunless %}</a>
          </div>
          
          {%- comment -%}Consumer Customized Message{%- endcomment -%}
          {%- if item.product.has_only_default_variant == false or item.properties.size != 0 or item.selling_plan_allocation != nil -%}
            <dl class="mb-0 text-accent small" data-has-only-default-variant="{{ item.product.has_only_default_variant }}" data-properties-size="{{ item.properties.size }}" data-selling-plan-allocation="{{ item.selling_plan_allocation }}">
              {%- for property in item.properties -%}
                {%- assign property_first_char = property.first | slice: 0 -%}
                {%- if property.last != blank and property_first_char != '_' -%}
                  <div class="item-customized-property">
                    <dt class="d-inline">{{ property.first }}: </dt>
                    <dd class="d-inline">
                      {%- if property.last contains '/uploads/' -%}
                        <a {% if property.last contains 'https://' %}
                          target="_blank" rel="nofollow"
                        {% endif %} href="{{ property.last }}" target="_blank">
                          {{ property.last | split: '/' | last }}
                        </a>
                      {%- else -%}
                        {{ property.last }}
                      {%- endif -%}
                    </dd>
                  </div>
                {%- endif -%}
              {%- endfor -%}
            </dl>
            {%- comment -%}Subscriptiont Purchase{%- endcomment -%}
            <p class="mb-0 text-accent small item-customized-property">{{ item.selling_plan_allocation.selling_plan.name }}</p>
          {%- endif -%}
  
          {% for discount in item.discounts %}
          <p class="mb-0 small text-accent">{{ discount.title }}</p>
          {% endfor %}
        </div>
      </div>
    </div>
  {%- endfor -%}
{%- endif -%}
